<template>
  <div>
    <MBX Biao="订单管理" Biao1="订单列表"></MBX>

    <!-- 卡片 -->
    <el-card class="mt">
      <el-row>
        <el-col :span="8">
          <div style="margin-top: 15px">
            <el-input
              placeholder="请输入内容"
              v-model="form.query"
              class="input-with-select"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="dDlist" border style="width: 100%" class="mt">
        <el-table-column type="index" label="#" width="80"> </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="575">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="80">
        </el-table-column>
        <el-table-column prop="pay_status" label="是否付款" width="80">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.pay_status == 0">未付款</el-tag>
            <el-tag type="success" v-else>已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="80"> </el-table-column>
        <el-table-column prop="create_time" label="下单时间" width="180">
          <template slot-scope="scope">
            <div>
              {{ scope.row.create_time | time }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" width="178">
          <template slot-scope="scope">
            <el-button
              @click="editDd"
              type="primary"
              size="mini"
              icon="el-icon-edit"
            ></el-button>
            <el-button
              @click="addWl"
              type="success"
              size="mini"
              icon="el-icon-location"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  -->

      <!-- 分页 -->
      <div class="mt">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.pagenum"
          :page-sizes="[4, 5, 6, 7]"
          :page-size="form.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!--  -->
    </el-card>
    <!--  -->

    <!-- 订单修改弹框 -->
    <el-dialog title="修改地址" :visible.sync="dialogFormVisible">
      <el-form :model="addCity">
        <el-form-item label="省市区/县" label-width="80px">
          <el-cascader
            v-model="checkedArr"
            :options="city"
            :props="addProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" label-width="80px">
          <el-input v-model="addCity.citylist" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!--  -->

    <!-- 物流信息弹框 -->
    <el-dialog title="物流进度" :visible.sync="dialogVisiblewl" width="50%">
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in wuliu"
          :key="index"
          :icon="item.icon"
          :type="activities.type"
          :color="item.color"
          :timestamp="item.time"
        >
         {{item.context }}
        </el-timeline-item>
      </el-timeline>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblewl = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisiblewl = false">确 定</el-button>
      </span>
    </el-dialog>
    <!--  -->
  </div>
</template>

<script>
import { getDlist } from "@/http/api";
import city from "@/mock/city.js";
import wuliu from "@/mock/wuliu.js";
export default {
  data() {
    return {
       activities: [{
          context: '支持使用图标',
          
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          context: '支持自定义颜色',
          color: '#0bbd87'
        },
        {
          context: '支持自定义尺寸',
          size: 'large'
        }], 
      dialogVisiblewl: false, //物流
      addCity: {
        citylist: "",
      },
      city,
      wuliu: wuliu.data,
      checkedArr: [],
      addProps: {
        expandTrigger: "hover",
        value: "value",
        children: "children",
        label: "label",
      },
      dialogFormVisible: false,
      dDlist: [], //订单列表数据
      form: {
        query: "",
        pagenum: 1,
        pagesize: 4,
      },
      tableData: {
        order_number: "",
        order_price: "",
        pay_status: "",
        is_send: "",
        create_time: "",
      },
      total: 0,
      formdd: {},
      formLabelWidth: "80px",
    };
  },
  created() {
    this.getDdList();
  },
  methods: {
    //点击弹出物流弹框
    addWl() {
      this.dialogVisiblewl = true;
    },
    handleChange() {
      //级联菜单改变触发的函数
    },
    //点击弹出订单修改弹框
    editDd() {
      this.dialogFormVisible = true;
    },
    async getDdList() {
      const res = await getDlist(this.form);
      console.log("订单列表数据", res);
      this.dDlist = res.goods;
      this.total = res.total;
    },
    handleSizeChange(val) {
      this.form.pagesize = val;
      this.getDdList();
    },
    handleCurrentChange(val) {
      this.form.pagenum = val;
      this.getDdList();
    },
  },
};
</script>

<style scoped>
.el-cascader {
  /* display: none; */
  width: 100%;
}
</style>
